<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, ser-scalable=no">
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
		<title></title>
		<style type="text/css">
			html { background: #efefef; }
			p { position: relative;height: 1rem;width: 90%;background;margin: 0 auto;border-bottom: 1px solid lightgray; }
			p input { outline: none;text-indent: 0.4rem;font-size: 0.3rem;height: 100%;width: 100%;background: rgba(0,0,0,0); }
			p span { display: inline-block;font-size: 0.3rem;color: gray;position: absolute;top: 0.35rem;right: 0.3rem; }
			div { width: 80%;height: 1rem;line-height: 1rem;text-align: center;background: #D81E06;color: #fff;font-size: 0.3rem;margin: 0.5rem auto 0;border-radius: 0.1rem; }
			i { width: 100%;text-align: center;display: inline-block;color: gray;margin-top: 0.4rem; }
			i wet { color: blue; }
		</style>
	</head>
	<body>
		<form id="form1">
		<p style="padding-top: 2rem;">
			<input type="number" value=""  id="phone" name="phone" placeholder="请输入手机号" />
		</p>
		<p>
			<input type="number" id="code"  name="code" placeholder="请输入验证码" />
			<span id="sendSms">获取验证码</span>
		</p>
		<div id="login">登录</div>
		<i>点击登录，即表示已阅读并同意<wet>《车友援服务协议》</wet></i>
		</form>
	</body>
	<script type="text/javascript">

		//拿到验证码后,就可以登陆了
	$(document).on('click','#login',function(){
		$.ajax({
			url : '/cphone/login',// 跳转到Controller执行登陆
			type : 'post',
			dataType:'json',
			data :$("#form1").serialize(),
			success : function(data) {
				if(data.code==200){
					alert(data.msg);
					window.location.href = "/page/to_index";
					return false;
				}else{
					alert(data.msg);
					return false;
				}

			},
			error : function(error) {
				alert("登陆异常");
			}
		});
 	});

	//TODO 输入手机号 -- 点击"获取验证码" 得到验证码
		var flag = true;
		$('span').click(function(){
			if($('input').val()==''){
				alert('请输入手机号');
			}else{
				if(flag){
					$.ajax({
						async : true,
						url : '/cphone/sendSms?phone='+$("#phone").val(),
						type : 'get',
						success : function(data) {
							alert(data.msg);
						}
					});
					timer();
				}
			}
		})
	//前台的60秒倒计时
		function timer(){
			flag = false;
			var t = 60;
			$('span').html('60秒');
			var timer = setInterval(function(){
				t--;
				$('span').html(t+'秒');
				if(t == 0){
					clearInterval(timer);
					flag = true;
					$('span').html('重新获取')
				}
			},1000)
		}
	</script>
</html>
